<template>
  <div class="tpl46-hot">
    
    <div
      class="modulePadding"
      :style="`padding-top:${tplItemData.modulePadding}px; padding-bottom:${tplItemData.modulePadding}px;`">
      <div class="hotgoods63 clearfix">
        <div class="hotgoods_item">
          <div class="item_title">{{ tplItemData.itemtitle1 }}</div>
          <div
            v-if="index < 2"
            :key="index"
            v-for="(item, index) in tplItemData.dataset" class="hotgoods_info">
            <a @click="openLink(item.link)">
              <div class="hotgoods_img">
                <img :src="item.pic" alt="">
              </div>
              <div class="hotgoods_title">{{ item.showtitle }}</div>
            </a>
          </div>
        </div>
        <div class="hotgoods_item">
          <div class="item_title">{{ tplItemData.itemtitle2 }}</div>
          <div
            v-if="index > 1"
            v-for="(item, index) in tplItemData.dataset"
            :key="index"
            class="hotgoods_info">
            <a @click="openLink(item.link)">
              <div class="hotgoods_img">
                <img :src="item.pic" alt="">
              </div>
              <div class="hotgoods_title">{{ item.showtitle }}</div>
            </a>
          </div>
        </div>
      </div>
    </div>
    
    
  
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object
      }
    },
    methods: {
      openLink(link) {
        openPage(link)
      },
    }
  })
</script>

<style lang="scss">
  .tpl46-hot{
    // 首页模板63
    .hotgoods63{
      .hotgoods_item{
        float:left;
        width:50%;
        &:last-child{
          width:50%;
          border-left:2px solid #e5e5e5;
          -moz-box-sizing:border-box;
          -webkit-box-sizing:border-box;
          box-sizing:border-box;
        
        }
        .item_title{
          padding:10px;
          font-size:22px;
          color:#999;
        }
        .hotgoods_info{
          float:left;
          width:50%;
          img{
            display:block;
            max-width:100%;
            // height:100%;
            margin:0 auto;
          }
          .hotgoods_title{
            padding:20px 0;
            font-size:24px;
            text-align:center;
            color:#fe083f;
          }
        }
      }
    }
  }
</style>
